<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<!-- 搜索框 -->
				<div class="left-wrapped">
					<div class="search-wrapped">
						<el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
							:prefix-icon="Search" @change="searchuser()" />
					</div>
					<div class="select-wrapped">
						<el-select v-model="department" placeholder="请选择部门" clearable @change="searchForDeparment"
							@clear="clearOpertion">
							<!--  getFirstPageList-->
							<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
						</el-select>
					</div>
				</div>
				<div class="button-wrapped">
					<el-button type="primary" plain @click="banUserList">筛选冻结用户</el-button>
					<el-button type="primary" plain @click="getFirstPageList">显示全部用户</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border @row-dblclick="openUser">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="account" label="账号"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="sex" label="性别"></el-table-column>
					<el-table-column prop="department" label="部门"></el-table-column>
					<el-table-column prop="email" label="邮箱"></el-table-column>
					<el-table-column prop="status" label="状态">
						<template #default="{ row }">
							<div>
								<el-tag v-if="row.status == '1'" class="ml-2">冻结</el-tag>
								<el-tag v-else class="ml-2" type="success">正常</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间">
						<template #default="{ row }">
							<div>{{ row.create_time?.slice(0, 10) }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="更新时间">
						<template #default="{ row }">
							<div>{{ row.update_time?.slice(0, 10) }}</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template #default="{ row }">
							<div>
								<el-button type="primary" @click="banUserFn(row.id)"
									:disabled='row.status == 1'>冻结</el-button>
								<el-button type="success" @click="hotUserFn(row.id)"
									:disabled='row.status == 0'>解冻</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
			<el-pagination :page-size="1" :current-page="paginationData.currentPage" :pager-count="7"
				:page-count="paginationData.pageCount" :total="adminTotal" @current-change="currentChange"
				layout="prev, pager, next" />
		</div>
	</div>
	<user_infor ref="userInforFn"></user_infor>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import { Search } from '@element-plus/icons-vue';
import user_infor from '../components/user_infor.vue';
import { bus } from "@/utils/mitt.js"
import { searchUserByAccount, searchUserByDepartment, getAdminListLength, returnListData, getBanList, banUser, hotUser } from '@/api/userinfor.js'
import { getDepartment } from "@/api/setting"
import { ElMessage } from 'element-plus'

//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
	first: '用户管理',
	second: '用户列表',
})

// 搜索框的modelValue
const adminAccount = ref<number>()

// 表格内容
const tableData = ref()

// 通过账号进行搜索
const searchuser = async () => {
	tableData.value = await searchUserByAccount(adminAccount.value, '用户')
}
// 部门数据
const departmentData = ref([])
const getDepartmentFn = async () => {
	departmentData.value = await getDepartment()
}
getDepartmentFn()
// 部门
const department = ref()
const searchForDeparment = async () => {
	tableData.value = await searchUserByDepartment(department.value)
}
// 清空选择框
const clearOpertion = async () => {
	getFirstPageList()

}

//  分页数据
const paginationData = reactive({
	// 总页数
	pageCount: 1,
	// 当前所处页数
	currentPage: 1
})
const adminTotal = ref<number>(0)
// 获取管理员的数量
const getAdminListLengthFn = async () => {
	const res = await getAdminListLength('用户')
	adminTotal.value = res.length
	paginationData.pageCount = Math.ceil(res.length / 10)
}
getAdminListLengthFn()
// 默认获取第一页的数据
const getFirstPageList = async () => {
	tableData.value = await returnListData(1, '用户')
}
getFirstPageList()
// 监听换页
const currentChange = async (value: number) => {
	paginationData.currentPage = value
	tableData.value = await returnListData(value, '用户')
}

// 筛选冻结用户
const banUserList = async () => {
	tableData.value = await getBanList()
}

// 冻结用户
const banUserFn = async (id: number) => {
	const res = await banUser(id)
	if (res.status == 0) {
		ElMessage({
			message: '冻结用户成功',
			type: 'success'
		})
		tableData.value = await returnListData(paginationData.currentPage, '用户')
	} else {
		ElMessage.error('冻结用户失败')
	}
}
// 解冻用户
const hotUserFn = async (id: number) => {
	const res = await hotUser(id)
	if (res.status == 0) {
		ElMessage({
			message: '解冻用户成功',
			type: 'success'
		})
		tableData.value = await returnListData(paginationData.currentPage, '用户')
	} else {
		ElMessage.error('解冻用户失败')
	}
}

const userInforFn = ref()
const openUser = (row: any) => {
	bus.emit('userId', row)
	userInforFn.value.open()
}
bus.on('offDialog', async (id: number) => {
	// 当前页数
	const current = paginationData.currentPage
	if (id) {
		tableData.value = await returnListData(paginationData.currentPage, '用户')
		if (tableData.value.length == 0) {
			paginationData.currentPage = current - 1
			getAdminListLength()

		}
	}
})

// 取消订阅/监听
onBeforeUnmount(() => {
	bus.all.clear()
})
</script>

<style scoped lang="scss"></style>